<template>
  <div class="position">
    <div class="title">
      二币USD 杠杆

      <el-tag :type="position.isShort ? 'danger' : 'success'" size="mini">{{
        position.isShort ? "空" : "多"
      }}</el-tag>
    </div>
    <!-- <div class="my-divider" /> -->
    <div style="overflow: hidden">
      <el-tag
        class="tag"
        v-for="tag in tags"
        :key="tag.label"
        size="mini"
        :type="tag.type"
      >
        {{ tag.label }}
      </el-tag>
      <el-tag class="tag" size="mini" type="danger">
        {{ !lever || "x" + lever }}
      </el-tag>
      <div class="profit">
        <div :style="{ color: profit.negative ? '#F56C6C' : '#67c23a' }">
          {{ profit.str || "--" }}
          <span v-if="profit.rateStr != null" class="profitRate">
            ({{ profit.rateStr || "--" }})</span
          >
        </div>
        <div class="label" style="float: right; font-size: 0.7rem">
          收益(USD)
        </div>
      </div>
    </div>
    <div class="data">
      <el-row :gutter="10">
        <el-col :xs="8">
          <div class="label">持仓量(2B)</div>
          <div class="data-val">
            {{ keepTwoDecimal(position.btcCount) || "--" }}
          </div>
        </el-col>
        <el-col :xs="8">
          <div class="label">保证金</div>
          <div class="data-val">{{ keepTwoDecimal(usdBond) || "--" }}</div>
        </el-col>
        <el-col :xs="8">
          <div class="label">爆仓率</div>
          <div class="data-val">123</div>
        </el-col>
        <el-col :xs="8">
          <div class="label">开仓均价</div>
          <div class="data-val">
            {{ keepTwoDecimal(position.avgFinalPrice) || "--" }}
          </div>
        </el-col>
        <el-col :xs="8">
          <div class="label">当前价</div>
          <div class="data-val"><RealtmePrice /></div>
        </el-col>
        <el-col :xs="8">
          <div class="label">预估强平价</div>
          <div class="data-val">123</div>
        </el-col>
      </el-row>
      <el-row :gutter="8">
        <el-col :xs="8">
          <el-button class="position-btn" size="mini" type="primary" plain
            >止盈止损</el-button
          >
        </el-col>
        <el-col :xs="8">
          <el-button class="position-btn" size="mini" type="primary" plain
            >平仓</el-button
          >
        </el-col>
        <el-col :xs="8">
          <el-button class="position-btn" size="mini" type="primary" plain
            >市价全平</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
import RealtmePrice from "@/components/RealtmePrice";

import { channels } from "@/js/core";
import { Position } from "@/js/exchangeUtils";
import { keepTwoDecimal } from "@/js/calcUtils";

export default {
  name: "Position",
  props: {
    position: Position,
  },
  components: { RealtmePrice },
  data() {
    return {
      unsubkey: null,
      indexPrice: null,
      tags: [
        {
          type: "info",
          label: "逐仓",
        },
      ],
    };
  },
  methods: {
    keepTwoDecimal(num) {
      return keepTwoDecimal(num);
    },
  },
  computed: {
    profit() {
      if (this.indexPrice == null) {
        return {};
      }
      let profit = this.keepTwoDecimal(
        this.position.calcProfit(this.indexPrice)
      );
      let rate = this.keepTwoDecimal(
        this.position.calcProfitRate(this.indexPrice) * 100
      );
      return {
        negative: profit < 0,
        str: profit <= 0 ? profit : "+" + profit,
        rateStr: Math.abs(rate) + "%",
      };
    },
    lever() {
      return this.position.calcLever();
    },
    usdBond() {
      return this.keepTwoDecimal(this.position.usdBond);
    },
  },
  mounted() {
    this.unsubkey = channels.BTC_INFO.sub((btcInfo) => {
      this.indexPrice = btcInfo.indexPrice;
    });
  },
  beforeDestroy() {
    channels.BTC_INFO.unsub(this.unsubkey);
  },
};
</script>

<style>
.position > .title {
  font-weight: 600;
  padding: 5px 0;
}

.position .tag {
  margin-right: 6px;
}

.position .label {
  color: #c0c4cc;
  font-size: 0.6rem;
  font-weight: 500;
}

.position .profit {
  display: inherit;
  float: right;
  font-weight: 600;
}

.position > .data {
  margin-top: 6px;
}

.position .data-val {
  padding: 4px 0;
  font-weight: 500;
  font-size: 0.8rem;
}

.position .position-btn {
  width: 100%;
}
</style>
